<template>
  <div class="loading-wrapper">
    <img src="../../assets/svg/loading.svg" v-if="loading">
  </div>
</template>

<script>
import config from '@/config/loading'
export default {
  name: 'Loading',
  props: {
    // show loading
    show: {
      type: Boolean,
      default: false
    },
    // timeout
    timeout: {
      type: Number,
      default: config.timeout
    }
  },
  data() {
    return {
      // start: 0,
      // end: 0,
      loading: false
    }
  },
  methods: {
    run() {
      setTimeout(() => {
        if (this.show) {
          this.loading = true
        }
      }, this.timeout - 1)
    }
  },
  created() {
    this.run()
  },
  watch: {
    show(v) {
      if (!v) {
        this.loading = false
      } else {
        // this.loading = true
        this.run()
      }
    },
    loading(v) {
      // console.log(v)
    }
  }
}
</script>

<style scoped lang="stylus">
.loading-wrapper
  width 100%
  //background red
  position fixed
  top 200px
  z-index 9999
</style>
